<template>
    <div>
        <top wrapheight="1" backgroundColor="rgba(255, 255, 255, .7)" titles="我的" back="1" setting="1">
            <template v-slot:df>
                <div>

                    <!-- 用户信息 -->

                    <div class="userinfo">
                        <div class="head">
                            <img src="../assets/user.png" style="width:100%;height:100%" alt="">
                        </div>
                        <div class="info">
                            <div class="infotitle">姓名昵称</div>
                            <div class="infodesc">简介xxx</div>
                        </div>
                        <div class="rightbtn">
                            <van-icon name="edit" size=".53rem" />
                        </div>
                    </div>

                    <div style="margin:-.6rem .2rem 0; border: .0075rem solid #f9e7cd;">
                        <van-notice-bar left-icon="volume-o" :scrollable="false" class="notice-swipe">
                            <van-swipe vertical class="notice-swipe notice-pad" :autoplay="3000" :touchable="false"
                                :show-indicators="false">
                                <van-swipe-item>明月直入，无心可猜。</van-swipe-item>
                                <van-swipe-item>仙人抚我顶，结发受长生。</van-swipe-item>
                                <van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>
                            </van-swipe>
                        </van-notice-bar>
                    </div>


                    <!-- 菜单板块 -->

                    <div>
                        <van-grid square icon-size=".8rem">
                            <van-grid-item :key="value" icon="description" text="想看 / 看过" />
                            <van-grid-item :key="value" icon="star-o" text="我的收藏" />
                            <van-grid-item :key="value" icon="balance-list-o" text="我的订单" />
                            <van-grid-item :key="value" icon="discount" text="优惠券" />
                        </van-grid>
                    </div>

                    <!-- 菜单横条 -->

                    <div class="smalltitle">
                        <span class="smalltitle-left"></span> 更多服务
                    </div>
                    <div style="padding:0 .2rem; border-bottom: .013rem solid #e8e8e8;">
                        <van-cell icon="service-o" title="联系客服" is-link to="chat" :size="'large'" />
                    </div>

                </div>
            </template>
        </top>
    </div>
</template>

<style scoped>
.userinfo {
    position: relative;
    padding: 80px 0 0 185px;
    height: 300px;
    background-color: #eaa269;
    color: white;
}

.head {
    position: absolute;
    top: 140px;
    left: 20px;
    width: 140px;
    height: 140px;
    background-color: #e8d3d3;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #fff;
}

.rightbtn {
    position: absolute;
    top: 140px;
    right: 20px;
    width: 40px;
    height: 40px;
}

.info {
    padding: 60px 60px 0 0;
}

.infotitle {
    margin-bottom: 10px;
    font-size: 30px;
}

.infodesc {
    font-size: 20px;
    color: #eee;
}

.notice-swipe {
    height: 80px;
    line-height: 80px;
    font-size: 20px;
}

.notice-pad {
    padding: 0 15px;
}

.pad {
    padding: 20px;
    background-color: #eee;
}

.smalltitle {
    padding: 20px;
    /* background-color: #fff3e2; */
    background-color: #eee;
    color: #e45454;
    font-weight: 800;
}

.smalltitle-left {
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 20px;
    background-color: #e45454;
}
</style>